<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>Crunchy :: Images</title>
	<meta title="template local_template.html">
</head>

<body>
<div id="main_title">Images and dhtml</div>
<div id="content">
<h3 >Dynamically inserting images into a page</h3>
<p>Crunchy allow a user to insert one or more images interactively below
an interpreter or any other elements.  The technique used to do this kind of
web page transformation is known as <i>dynamic html</i> or <i>dhtml</i> for short.
You need to import the <code>dhtml.py</code> module to do this within
Crunchy.
</p>
<pre title="interpreter">
import dhtml
dhtml.image("../../images/crunchy-python-powered.png", width=457, height=83)
</pre
<p>
The above image has been loaded from a location given <b>relative to the current
html file</b> being displayed, always assumed to be from the basic server.
To load other images, you will need to specify the absolute path.  Since
I do not know the path of interesting images on your computer,
I'll give you another one to try.
</p>
<pre title="interpreter">
dhtml.image("http://imgs.xkcd.com/comics/python.png")
</pre>
<p>
By default, Crunchy displays images with a width and height of 400 pixels each.
As you have seen in the first example, you can specify other parameters for
the image.
</p>
<p>Crunchy can also work with modules that generate images
to display them dynamically within the browser.  To
help you with locating images, Crunchy defines two
locations on your computer: your home directory and the Crunchy temporary
directory.

The following example assumes that
<a href="http://matplotlib.sourceforge.net/" title="external_link">matplotlib</a>
is installed; if it's not, you're out of luck!</p>
<pre title="editor">
import dhtml
image_file = dhtml.join_path(crunchy.temp_dir, "foo.png")

# assumes matplotlib is installed
import matplotlib.numerix as nx
import pylab

def boltzman(x, xmid, tau):
    """
    evaluate the boltzman function with midpoint
    xmid and time constant tau over x
    """
    return 1. / (1. + nx.exp(-(x-xmid)/tau))

def fill_below_intersection(x, S, Z):
    """
    fill the region below the intersection of S and Z
    """
    #find the intersection point
    ind = nx.nonzero( nx.absolute(S-Z)==min(nx.absolute(S-Z)))[0]
    # compute a new curve which we will fill below
    Y = nx.zeros(S.shape, typecode=nx.Float)
    Y[:ind] = S[:ind]  # Y is S up to the intersection
    Y[ind:] = Z[ind:]  # and Z beyond it
    pylab.fill(x, Y, facecolor='blue', alpha=0.5)

x = nx.arange(-6, 6, .01)
S = boltzman(x, 0, 1)
Z = 1-boltzman(x, 0.5, 1)
pylab.plot(x, S, x, Z, color='red', lw=2)
fill_below_intersection(x, S, Z)

pylab.savefig(image_file)
dhtml.image(image_file)
</pre>
<div class="notes">
<h4>Suggestions?</h4>
<p> If you have some suggestions for libraries other than matplotlib that generate
images and could be showcased by Crunchy, let us know.
</p>
</div>

<h3 >Advanced dhtml</h3>
<p>In addition to images, other html elements can be added and removed
dynamically.  The following example shows how simple animations can
be added to a page.</p>
<pre title="editor">
# comprehensive example

import dhtml
import time

delay = 0.5
long_delay = 2

def countdown(message):
    dhtml.append("span", label="message", attributes={'innerHTML':message})
    time.sleep(delay)
    dhtml.append("span", label="message", attributes={'innerHTML':message+" ."})
    time.sleep(delay)
    dhtml.append("span", label="message", attributes={'innerHTML':message+" .."})
    time.sleep(delay)
    dhtml.append("span", label="message", attributes={'innerHTML':message+" ...."})
    time.sleep(long_delay)

def generic(file_path, position):
    return dhtml.image(file_path, width=32, height=32,
                      label="b_%s"%position, parent_label=position)

# We use images that are part of the Crunchy distribution.
def yellow(position):
    return generic("../../images/warning_big.png", position)

def green(position):
    return generic("../../images/ok_big.png", position)

def red(position):
    return generic("../../images/display_big.png", position)

dhtml.append("br") # start on a new line

countdown("Inserting a table with one row")
dhtml.append("table", label="table")
dhtml.append("tr", label="row1", parent_label="table")
dhtml.append("td", label="1_1", parent_label="row1")
dhtml.append("td", label="1_2", parent_label="row1")
dhtml.append("td", label="1_3", parent_label="row1")
red("1_1")
red("1_2")
red("1_3")

countdown("Changing first element")
green("1_1")
countdown("Changing second element")
green("1_2")
countdown("Changing third element")
green("1_3")

countdown("Adding a second row")
dhtml.append("tr", label="row2", parent_label="table")
dhtml.append("td", label="2_1", parent_label="row2")
dhtml.append("td", label="2_2", parent_label="row2")
dhtml.append("td", label="2_3", parent_label="row2")
red("2_1")
red("2_2")
red("2_3")

countdown("Adding a third row")
dhtml.append("tr", label="row3", parent_label="table")
dhtml.append("td", label="3_1", parent_label="row3")
dhtml.append("td", label="3_2", parent_label="row3")
dhtml.append("td", label="3_3", parent_label="row3")
yellow("3_1")
yellow("3_2")
yellow("3_3")

countdown("Removing the second row")
dhtml.remove("row2")

# notice how elements are only appended...
countdown("Appending a new row")
dhtml.append("tr", label="row2", parent_label="table")
dhtml.append("td", label="2_1", parent_label="row2")
dhtml.append("td", label="2_2", parent_label="row2")
dhtml.append("td", label="2_3", parent_label="row2")
red("2_1")
red("2_2")
red("2_3")

dhtml.append("span", label="message", attributes={'innerHTML':"Done!"})
</pre>
<h3>What next?</h3>
<p>Nothing, really... Just adding some text so that the images above are not printed as the last
thing on the page, making them appear below the browser's status bar.
</p>

</div>

</body>
</html>
